<extend name="Base/common" />
<block name="header">
    <header class="jumbotron subhead" id="overview">
        <div class="container">
            <h2>数据分析</h2>
            <p class="lead"></p>
        </div>
    </header>
</block>
<block name="body">
		<div id="main"  class="charts_div" ></div>
		<div id="main1" class="charts_div"></div>
		<div id="main2"  class="charts_div"></div>
		<div class="container">
			<h2 style="text-align: center;margin-bottom: 63px;">豆瓣影评综合得分百佳影片<br><small>数据仅作为测试使用，不代表真实结果<br />计算公式：综合得分 = (影评*0.82 + 评价人数*0.18)/2000</small></h2>
			<table class="table table-hover">
				<thead>
					<tr>
						<th>排名</th>
						<th>电影名称</th>
						<th>电影类型</th>
						<th>豆瓣评分</th>
						<th>参与人数</th>
						<th>综合得分</th>
						<th>电影详情</th>
					</tr>
				</thead>
				<tbody>
					<volist name="data['rank_3']" id='film_rank' offset="0" length="100" key="k">
						<tr>
							<th>第 {$k} 名</th>
							<th>《{$film_rank.film_name_real}》</th>
							<th>{$film_rank.film_type}</th>
							<th>{$film_rank.film_score}分</th>
							<th>{$film_rank.film_vote}人</th>
							<th>{$film_rank.rank_score}</th>
							<th><a href="{:U('Download/download?id='.$film_rank['id'].'&film_name='.$film_rank['film_name_real'])}" target="_blank">查看</a></th>
						</tr>
					</volist>
					<!--<for start='1' end="100" name="data['rank_3']">
						<tr>
							<th>{$data['rank_3'][$i]['ranking']}</th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
						</tr>
					</for>-->
					
				</tbody>
			</table>
		</div>
	
	
	<script src="__STATIC__/chart/echarts-all.js"></script>
	<script type="text/javascript">
	
       // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main'));
        var myChart1 = echarts.init(document.getElementById('main1')); 
        var myChart2 = echarts.init(document.getElementById('main2')); 
        


	var option = {
	    title : {
	        text: '电影分类分析',
	        subtext: '',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient : 'vertical',
	        x : 'left',
	        data:[<volist name="data['rank_type']" id="rank_type">"{$rank_type.type_name}",</volist>]
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {
	                show: true, 
	                type: ['pie', 'funnel'],
	                option: {
	                    funnel: {
	                        x: '25%',
	                        width: '50%',
	                        funnelAlign: 'left',
	                        max: 1548
	                    }
	                }
	            },
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    series : [
	        {
	            name:'访问来源',
	            type:'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:[
	            <volist name="data['rank_type']" id="rank_type">{test:{},value:{$rank_type.rank_score}, name:'{$rank_type.type_name}'},</volist>
	            ]
	        }
	    ]
	};
                    
	
	var	option1 = {
    title : {
        text: '电影类型数据分析',
        subtext: 'version 1.0'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['评分平均值','投票平均值']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : [<volist name="data['rank_1']" id="rank_1" >"{$rank_1.film_type}",</volist>]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'评分平均值',
            type:'bar',
            data:[<volist name="data['rank_1']" id="rank_1" >{$rank_1.avg_score},</volist>],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'投票平均值',
            type:'bar',
            data:[<volist name="data['rank_1']" id="rank_1" >{$rank_1.avg_vote},</volist>],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
                 
          var option2 = {
			    title : {
			        text: '电影类型数据具体分析',
			        subtext: 'version 1.0'
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['评分平均值','投票平均值','加权平均']
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            data : [<volist name="data['rank_2']" id="rank_2" >"{$rank_2.film_type}",</volist>]
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            name:'评分平均值',
			            type:'bar',
			            data:[<volist name="data['rank_2']" id="rank_2" >{$rank_2.avg_score},</volist>],
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                    {type : 'average', name: '平均值'}
			                ]
			            }
			        },
			        {
			            name:'投票平均值',
			            type:'bar',
			            data:[<volist name="data['rank_2']" id="rank_2" >{$rank_2.avg_vote},</volist>],
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                    {type : 'average', name : '平均值'}
			                ]
			            }
			        },
			        {
			            name:'加权平均',
			            type:'bar',
			            data:[<volist name="data['rank_2']" id="rank_2" >{$rank_2.jiaquan},</volist>],
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                    {type : 'average', name : '平均值'}
			                ]
			            }
			        }
			    ]
			};   
                    

          // 为echarts对象加载数据 
        myChart.setOption(option);
        myChart1.setOption(option1); 
        myChart2.setOption(option2);
    </script>
    <style>
    
    </style>
    
</block>